<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>UA组卡器</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link href="./img/favicon_16.ico" rel="icon" sizes="16x16">
    <link href="./img/favicon.ico" rel="icon" sizes="any">

    <script>
        var datas;
        var datasMap = {};

        function deckInfoChanged(e) {
            var deckInfo = e.value;
            var cardList = deckInfo.split("\n");
            var deckMap = new Map();

            for (var i = 0; i < cardList.length; i++) {
                var card = cardList[i].split(" ")[0];
                var data = datasMap[card];

                if (data != null) {
                    var num = deckMap.get(data);
                    if (num == null) {
                        deckMap.set(data, 1);
                    } else {
                        deckMap.set(data, num + 1);
                    }
                }
            }

            console.log(typeof deckMap);

            var count = 0;

            var cardDiv = document.getElementById("cardListArea");
            var cardDivHtml = "";

            deckMap.forEach((num, data) => {

                cardDivHtml = cardDivHtml + `<div class="cardImageBox">
                    
                    <img src="${data.imageUrl}" class="cardImage"/>
                    <a target="_blank" href="./info.html?cardNumData=${data.cardNumData}" >
                   <p style="font-size: 16px;font-weight: bolder;">${data.cardNumData}</p>
                    <p style="font-size: 16px;">${data.cardCnName}</p>
                    <p style="font-size: 16px;font-weight: bolder;">x ${num}</p>
                    </a>
                    </div>`;
                count += num;
            });

            cardDiv.innerHTML = cardDivHtml;

            document.getElementById("deckCount").innerHTML = count;
        }


        window.onload = function () {
            var url = "./data/data_cn.json"
            var request = new XMLHttpRequest();
            request.open("get", url); /*设置请求方法与路径*/
            request.send(null); /*不发送数据到服务器*/
            request.onload = function () { /*XHR对象获取到返回信息后执行*/
                if (request.status == 200) { /*返回状态为200，即为数据获取成功*/
                    datas = JSON.parse(request.responseText);
                    for (var i = 0; i < datas.length; i++) {
                        var data = datas[i];
                        if (datasMap[data.cardNumData] == null) {
                            datasMap[data.cardNumData] = data;
                        }
                    }

                    var queryString = window.location.search;
                    var urlParams = new URLSearchParams(queryString);
                    var deck = urlParams.get('deck');
                    document.getElementById("deckInfo").value = deck;
                    deckInfoChanged(document.getElementById("deckInfo"))
                }
            }
        };


        function sort() {
            var deckInfo = document.getElementById("deckInfo");
            deckInfo.value = deckInfo.value.split("\n").sort().join("\n")
            deckInfoChanged(document.getElementById("deckInfo"))
        }

        function sort2() {
            var deckInfo = document.getElementById("deckInfo");
            deckInfo.value = deckInfo.value.split("\n")
                .map(item => {
                    var card = item.split(" ")[0];
                    var data = datasMap[card];
                    return data;
                }).filter(data => {
                    return data != null;
                }).sort(function (data1, data2) {
                    var needEnergyData = data1.needEnergyData.substr(-1);
                    needEnergyData = needEnergyData == "-" ? 0 : needEnergyData;
                    var needEnergyData2 = data2.needEnergyData.substr(-1);
                    needEnergyData2 = needEnergyData2 == "-" ? 0 : needEnergyData2;
                    return needEnergyData - needEnergyData2;
                }).map(data => { return data.cardNumData; })
                .join("\n")
            deckInfoChanged(document.getElementById("deckInfo"))
        }


    </script>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        .main {
            display: flex;
            flex-wrap: wrap;
            display: flex;
            flex-wrap: wrap;
        }


        #deckArea {
            width: 20%;
            text-align: center;
        }

        #deckInfo {
            width: 80%;
            margin: 10px auto;
            display: block;
            height: 80vh;
        }

        #cardListArea {
            width: 80%;
            display: flex;
            flex-wrap: wrap;
        }

        .cardImageBox {
            width: 14.28%;
        }

        .cardImageBox p {
            text-align: center;
        }

        .cardImage {
            /* width: 19.5% */
            width: 167px;
            margin: 3px auto;
            display: block;
            height: 233px;
        }
    </style>
</head>

<body>

    <div class="main">
        <div id="deckArea">
            <textarea id="deckInfo" oninput="deckInfoChanged(this);"></textarea>
            <h1 style=" text-align: center;">卡组总数:<span id="deckCount">0</span></h1>
            <button style="margin-top: 5px;" onclick='sort()'>编号整理</button>
            <button style="margin-top: 5px;" onclick='sort2()'>能量整理</button>

            <button style="margin-top: 5px;"
                onclick='alert("https://sisyphus2016.gitee.io/unionarena_card_queryer/deck_edit.html?deck="+document.getElementById("deckInfo").value.replaceAll("\n","%0A"))'>分享</button>
        </div>


        <div id="cardListArea">
            <!-- <img src="./card/UA01BT_CGH-1-001.png" class="cardImage"> -->
        </div>

    </div>
</body>

</html>